<template>
  <!-- 卡片视图区 -->
  <el-card>
    <el-row :gutter="25">
      <el-col :span="7">
        <!-- 搜索添加 -->
        <el-input
          placeholder="请输入成员姓名"
          v-model.lazy="queryInfo.searchName"
          @change="getPersonList"
        >
        </el-input>
      </el-col>

      <el-col :span="4">
        <el-button type="primary" @click="dialogAddVisible = true"
          >添加成员</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <!-- 列表 -->
    <el-table
      :data="PersonList"
      border
      stripe
      v-loading="isLoading"
      element-loading-background="rgba(255, 255, 255, .5)"
      element-loading-text="加载中，请稍后..."
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column label="序号" type="index" fixed="left"></el-table-column>
      <el-table-column label="姓名" prop="PersonName"></el-table-column>
      <el-table-column label="身份证号" prop="PersonNo"></el-table-column>
      <el-table-column label="父亲" prop="PersonFather"></el-table-column>
      <el-table-column label="母亲" prop="PersonMother"></el-table-column>
      <el-table-column label="儿子" prop="PersonSon"></el-table-column>
      <el-table-column label="女儿" prop="PersonDaughter"></el-table-column>
      <el-table-column label="祖父" prop="PersonGrandfather"></el-table-column>
      <el-table-column label="祖母" prop="PersonGrandmother"></el-table-column>
      <el-table-column label="更新时间" prop="UpdateTime"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <!-- 修改 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="
              dialogEditOpen(
                scope.row.PersonName,
                scope.row.PersonNo,
                scope.row.PersonFather,
                scope.row.PersonMother,
                scope.row.PersonSon,
                scope.row.PersonDaughter,
                scope.row.PersonGrandfather,
                scope.row.PersonGrandmother,
              )
            "
          >
          </el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deletePerson(scope.row.PersonNo)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.page"
      :page-sizes="[1, 2, 10, 100]"
      :page-size="queryInfo.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </el-card>

  <el-dialog title="添加成员关系" v-model="dialogAddVisible" width="50%">
    <el-form
      :model="addForm"
      :rules="addFormRules"
      ref="addFormRef"
      label-width="100px"
    >
      <el-form-item label="姓名" prop="PersonName">
        <el-input v-model="addForm.PersonName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="PersonNo">
        <el-input v-model="addForm.PersonNo" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="父亲" prop="PersonFather">
        <el-input v-model="addForm.PersonFather"></el-input>
      </el-form-item>
      <el-form-item label="母亲" prop="PersonMother">
        <el-input v-model="addForm.PersonMother" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="儿子" prop="PersonSon">
        <el-input v-model="addForm.PersonSon"></el-input>
      </el-form-item>
      <el-form-item label="女儿" prop="PersonDaughter">
        <el-input v-model="addForm.PersonDaughter" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="祖父" prop="PersonGrandfather">
        <el-input v-model="addForm.PersonGrandfather" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="祖母" prop="PersonGrandmother">
        <el-input v-model="addForm.PersonGrandmother" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="更新时间" prop="UpdateTime">
        <el-input v-model="addForm.UpdateTime"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="addPerson()">确 定</el-button>
    <el-button @click="dialogAddVisible = false">取 消</el-button>
  </el-dialog>

  <!-- 编辑对话框 -->
  <el-dialog title="编辑成员信息" v-model="dialogEditVisible" width="50%">
    <el-form
      :model="editForm"
      :rules="editFormRules"
      ref="editFormRef"
      label-width="100px"
    >
      <el-form-item label="姓名" prop="PersonName">
        <el-input v-model="editForm.PersonName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="PersonNo">
        <el-input v-model="editForm.PersonNo" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="父亲" prop="PersonFather">
        <el-input v-model="editForm.PersonFather"></el-input>
      </el-form-item>
      <el-form-item label="母亲" prop="PersonMother">
        <el-input v-model="editForm.PersonMother" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="儿子" prop="PersonSon">
        <el-input v-model="editForm.PersonSon"></el-input>
      </el-form-item>
      <el-form-item label="女儿" prop="PersonDaughter">
        <el-input v-model="editForm.PersonDaughter" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="祖父" prop="PersonGrandfather">
        <el-input v-model="editForm.PersonGrandfather" @blur="test()"></el-input>
      </el-form-item>
      <el-form-item label="祖母" prop="PersonGrandmother">
        <el-input v-model="editForm.PersonGrandmother" @blur="test()"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="updatePerson">确 定</el-button>
    <el-button @click="dialogEditVisible = false">取 消</el-button>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      dialogAddVisible: false,
      dialogEditVisible: false,
      queryInfo: {
        searchNo: "",
        page: 1,
        limit: 10,
      },
      PersonList: [], // 家谱列表
      total: 0, // 最大数据记录
      addForm: {
        PersonName: "",
        PersonNo: "",
        PersonFather: "",
        PersonMother: "",
        PersonSon: "",
        PersonDaughter: "",
        PersonGrandfather: "",
        PersonGrandmother: "",
      },
      editForm: {
        PersonName: "",
        PersonNo: "",
        PersonFather: "",
        PersonMother: "",
        PersonSon: "",
        PersonDaughter: "",
        PersonGrandfather: "",
        PersonGrandmother: "",
        UpdateTime: "",
      },
      addFormRules: {
        PersonName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        PersonNo: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
        ],
        PersonFather: [
          {
            required: true,
            message: "请输入父亲姓名",
            trigger: "blur",
          },
        ],
        PersonMother: [
          {
            required: true,
            message: "请输入母亲姓名",
            trigger: "blur",
          },
        ],
        PersonSon: [
          {
            required: true,
            message: "请输入儿子姓名",
            trigger: "blur",
          },
        ],
        PersonDaughter: [
          {
            required: true,
            message: "请输入女儿姓名",
            trigger: "blur",
          },
        ],
        PersonGrandfather: [
          {
            required: true,
            message: "请输入祖父姓名",
            trigger: "blur",
          },
        ],
        PersonGrandmother: [
          {
            required: true,
            message: "请输入祖母姓名",
            trigger: "blur",
          },
        ],
      },
      editFormRules: {
        PersonName: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        PersonNo: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
        ],
        PersonFather: [
          {
            required: true,
            message: "请输入父亲姓名",
            trigger: "blur",
          },
        ],
        PersonMother: [
          {
            required: true,
            message: "请输入母亲姓名",
            trigger: "blur",
          },
        ],
        PersonSon: [
          {
            required: true,
            message: "请输入儿子姓名",
            trigger: "blur",
          },
        ],
        PersonDaughter: [
          {
            required: true,
            message: "请输入女儿姓名",
            trigger: "blur",
          },
        ],
        PersonGrandfather: [
          {
            required: true,
            message: "请输入祖父姓名",
            trigger: "blur",
          },
        ],
        PersonGrandmother: [
          {
            required: true,
            message: "请输入祖母姓名",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getPersonList();
  },
  methods: {
    async getPersonList() {
      this.isLoading = true;
      // 调用post请求
      console.log(this.PersonList)
      const { data: res } = await this.$http.get("system/apis/relationship", {
        params: this.queryInfo,
      });
      if (res.code != 20000) {
        this.$message.error("加载用户列表失败");
        this.isLoading = false;
      }
      this.PersonList = res.data.value; // 将返回数据赋值
      this.total = res.data.total; // 总个数
      this.isLoading = false; 
    },
    // 监听pageSize改变的事件
    handleSizeChange(newLimit) {
      this.queryInfo.limit = newLimit;
      this.getPersonList(); // 数据发生改变重新申请数据
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getPersonList(); // 数据发生改变重新申请数据
    },
    test(){
      console.log(this.addForm.PersonNo);
    },
    async deletePerson(PersonNo) {
      // 弹框
      const confirmResult = await this.$confirm(
        "此操作将永久删除该家谱成员, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 成功删除为confirm 取消为 cancel
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await this.$http.delete(
        "system/apis/relationship?person_no=" + PersonNo
      );
      console.log(res);
      if (res.code != 20000) {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getPersonList();
      console.log(PersonNo)
    },
    // 添加成员
    addPerson() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起请求
        console.log( this.addForm);
        const { data: res } = await this.$http.post(
          "/system/apis/relationship",
          this.addForm
        );
        if (res.code == 20000) {
          this.getPersonList();
          this.dialogAddVisible = false;
          console.log(this.PersonList)
          return this.$message.success("添加成功");
        }
        this.$message.error("添加失败");
      });
    },
    // 编辑
    updatePerson() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起请求
        console.log(this.PersonNo)
        const { data: res } = await this.$http.put(
          "/system/apis/relationship",
          this.editForm
        );
        if (res.code == 20000) {
          this.getPersonList();
          this.dialogEditVisible = false;
          return this.$message.success("编辑成功");
        }
        this.$message.error("编辑失败");
      });
    },
    dialogEditOpen(
     PersonName,
     PersonNo,
     PersonFather,
     PersonMother,
     PersonSon, 
     PersonDaughter,
     PersonGrandfather,
     PersonGrandmother
    ) {
      this.editForm.PersonName = String(PersonName);
      this.editForm.PersonNo = String(PersonNo);
      this.editForm.PersonFather = String(PersonFather);
      this.editForm.PersonMother = String(PersonMother);
      this.editForm.PersonSon = String(PersonSon);
      this.editForm.PersonDaughter = String(PersonDaughter);
      this.editForm.PersonGrandfather = String(PersonGrandfather);
      this.editForm.PersonGrandmother = String(PersonGrandmother);
      this.dialogEditVisible = true;
    },
  },
};
</script>

<style>
</style>